<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJS处理数据表格</title>
		<style>
			body{
			  font-family: 'microsoft yahei',Arial,sans-serif;
			}
			
			h1{
			  font-weight:500;
			  font-size:24px;
			}
			
			table, th , td {
			   border: 1px solid grey;
			   border-collapse: collapse;
			   padding: 10px;
			}
			
			table tr:nth-child(odd) {
			   background-color: #E4E4E4;
			}
			
			table tr:nth-child(even) {
			   background-color: #ffffff;
			}
		</style>
	</head>

	<body>
		<h1>成绩单</h1>
		<div ng-app="" ng-controller="C_Student">
			<table>
				<tr>
					<td>姓：</td>
					<td>
						<input type="text" ng-model="student.lastName" />
					</td>
				</tr>
				<tr>
					<td>名：</td>
					<td>
						<input type="text" ng-model="student.firstName" />
					</td>
				</tr>
				<tr>
					<td>全名：</td>
					<td>{{student.fullName()}}</td>
				</tr>
				<tr>
					<th>课程</th>
					<th>分数</th>
				</tr>
				<tr ng-repeat="subject in student.subjects">
					<td>{{subject.name}}</td>
					<td>{{subject.marks}}</td>
				</tr>
			</table>
		</div>
		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script>
			// 控制器
			function C_Student($scope){
				$scope.student = {
					firstName:"Jack",
					lastName:"Ben",
					fees:500,
					subjects:[
						{name:'php', marks:90},
						{name:'linux', marks:66},
						{name:'html', marks:70}
					],
					fullName:function(){
						var studentObj;
						studentObj = $scope.student;
						return studentObj.firstName + " " + studentObj.lastName;
					}
				};
			}
			
		</script>
	</body>

</html>